Ext.require(['Ext.*']);

Ext.onReady(function() {
    var cpuChart = Ext.create('Ext.chart.Chart', {
        style: 'background: #fff',
        animate: {
            easing: 'bounceOut',
            duration: 500,
        },
        store: cpuStore,
        insertPadding: 5,
        flex: 1,
        //width: 150,
        //height: 150,
        //margin: '5 5 5 5',
        //padding: '5 5 5 5',
        axes: [{
            type: 'gauge',
            title: 'CPU',
            position: 'gauge',
            minimum: 0,
            maximum: 100,
            steps: 10,
            margin: -5
        }],
    });

    var cpuSeries = {
        type: 'gauge',
        field: 'cpuData',
        donut: 50,
        colorSet: ['#82B525', '#ddd']
    };
    
    cpuChart.series.add(cpuSeries);
    //cpuChart.redraw();
    
    var memChart = Ext.create('Ext.chart.Chart', {
        style: 'background: #fff',
        animate: {
            easing: 'bounceOut',
            duration: 500,
        },
        store: cpuStore,
        insertPadding: 25,
        flex: 1,
        width: 170,
        height: 150,
        axes: [{
            type: 'gauge',
            title: 'Memory',
            position: 'gauge',
            minimum: 0,
            maximum: 100,
            steps: 10,
            margin: -5
        }],
    });

    var memSeries = {
        type: 'gauge',
        field: 'memData',
        donut: 70,
        colorSet: ['#82B525', '#ddd'],
        //needle: true
    };
    
    memChart.series.add(memSeries);

    var panel1 = Ext.create('Ext.panel.Panel', {
        title: 'CPU and Memory',
        tbar: [{
            text: 'Refresh',
            handler: function() {
                cpuStore.loadData(genCpuData(1, 100));
            }
        }],
        layout: {
        	type: 'hbox',
        	align: 'stretch',
        	/*defaultMargins: {
        		top: '5px',
        		right: '5px',
        		bottom: '5px',
        		left: '5px'
        	}*/
        }
    });
    panel1.add(cpuChart);
    panel1.add(memChart);
    
    var trafficChart = Ext.create('Ext.chart.Chart', {
        style: 'background: #fff',
        //animate: true,
        //theme: 'Purple',
        store: trafficStore,
        //shadow: true,
        legend: {
        	position: 'bottom',
        	boxFill: '#ddd',
        	boxStroke: '#000066',
        	boxStrokeWidth: 1,
        },
        axes: [{
        	type: 'Numeric',
        	minimum: 0,
        	position: 'left',
        	fields: ['traffic'],
        	title: 'Throughput',
        	minorTickSteps: 1,
        	grid: {
        		odd: {
        			opacity: 1,
        			fill: '#ddd',
        			stroke: '#bbb',
        			'stroke-width': 1
        		}
        	}
        }, {
        	type: 'Numeric',
        	minimum: 0,
        	position: 'bottom',
        	fields: ['time'],
        	title: 'Time'
        }],
    });

    var trafficSeries = {
        type: 'line',
        title: 'Throughput',
        /*highlight: {
        	size: 2,
        	radius: 2
        },*/
        axis: 'left',
        xField: 'time',
        yField: 'traffic',
        smooth: true,
        label: {
        	color: '#000066',
        },
        markerConfig: {
        	type: 'cross',
        	size: 2,
        	radius: 2,
        	'fill': '#33ccff',
        	'stroke-width': 1,
        },
        style: {
        	stroke: '#000066',
        	'stroke-width': 1,
        },
        tips: {
        	trackMouse: true,
        	width: 120,
        	height: 28,
        	renderer: function(storeItem, item) {
        		this.setTitle( storeItem.get('traffic') + 'K bytes');
        	}
        }
    };
    
    trafficChart.series.add(trafficSeries);

    var connChart = Ext.create('Ext.chart.Chart', {
        style: 'background: #fff',
        //animate: true,
        store: connStore,
        //shadow: true,
        //theme: 'Green',
        smooth: true,
        legend: {
        	position: 'bottom',
        	boxFill: '#ddd',
        	boxStroke: '#000066',
        	boxStrokeWidth: 1,
        },
        axes: [{
        	type: 'Numeric',
        	minimum: 0,
        	position: 'left',
        	fields: ['cur_conn', 'new_conn'],
        	title: 'Conn/Sec',
        	minorTickSteps: 1,
        	grid: {
        		odd: {
        			opacity: 1,
        			fill: '#ddd',
        			stroke: '#bbb',
        			'stroke-width': 1
        		}
        	}
        }, {
        	type: 'Numeric',
        	position: 'bottom',
        	fields: ['time'],
        	title: 'Time'
        }],
    });

    var curConnSeries = {
        type: 'line',
        title: 'Concurrent',
        /*highlight: {
        	size: 2,
        	radius: 2
        },*/
        axis: 'left',
        xField: 'time',
        yField: 'cur_conn',
        markerConfig: {
        	type: 'cross',
        	size: 2,
        	radius: 2,
        	'fill': '#ccff33',
        	'stroke-width': 1,
        },
	    style: {
	    	stroke: '#336600',
	    	'stroke-width': 1,
	    },
	    tips: {
	    	trackMouse: true,
	    	width: 120,
	    	height: 28,
	    	renderer: function(storeItem, item) {
	    		this.setTitle( storeItem.get('cur_conn') + ' conn/sec');
	    	}
	    }
    };
    
    var newConnSeries = {
        type: 'line',
        title: 'New',
        /*highlight: {
        	size: 2,
        	radius: 2
        },*/
        axis: 'left',
        xField: 'time',
        yField: 'new_conn',
        markerConfig: {
        	type: 'circle',
        	size: 2,
        	radius: 2,
        	'fill': '#ff3333',
        	'stroke-width': 1,
        },
        style: {
        	stroke: '#990000',
        	'stroke-width': 1,
        },
        tips: {
        	trackMouse: true,
        	width: 120,
        	height: 28,
        	renderer: function(storeItem, item) {
        		this.setTitle( storeItem.get('new_conn') + ' conn/sec');
        	}
        }
    };

    connChart.series.add(curConnSeries);
    connChart.series.add(newConnSeries);

    var vsCombo = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Select VServer',
        //renderTo: panel2,
        displayField: 'vs',
        width: 180,
        labelWidth: 80,
        store: vsStore,
        queryMode: 'local',
        typeAhead: true
    });
    
    var panel2 = Ext.create('Ext.panel.Panel', {
        title: 'Traffic and Connection',
        tbar: [ vsCombo ],
        layout: {
        	type: 'vbox',
        	align: 'stretch',
        	/*defaultMargins: {
        		top: '5px',
        		right: '5px',
        		bottom: '5px',
        		left: '5px'
        	}*/
        },
        defaults: {
            bodyStyle: 'padding: 10px',
            width: 500,
            height: 250
        },
        rowspan: 2,
        height: 600,
    });
    panel2.add([trafficChart, connChart]);

    var panel3 = Ext.create('Ext.panel.Panel', {
        title: 'System Info',
        layout: 'fit',
    });

    var panel4 = {
        xtype: 'panel',
        title: 'item3',
        //height: 200,
        //width: '100%'
    };
    
    var dashboard = Ext.create('Ext.panel.Panel', {
        id: 'dashboard',
        title: 'dashboard',
        layout: {
            type: 'table',
            columns: 2,
            /*tableAttrs: {
            	style: {
            		width: '100%'
            	}
            },
	        trAttrs: {
	        	style: {
	        		width: '100%'
	        	}
	        },
            tdAttrs: {
            	style: {
            		width: '50%'
            	}
            }*/
        },
        width: 1000,
        height: 800,
        defaults: {
            bodyStyle: 'padding: 10px',
            width: 500,
            height: 300
        },
        renderTo: Ext.getBody(),
    });
    
    dashboard.add([panel1, panel2, panel3, panel4]);
    
    var task = {
    	run: function() {
    		//feedTrafficData(trafficStore);
    		trafficStore.feedData();
    		//trafficStore.getFields();
    		connStore.feedData();
    	},
    	interval: 2000
    };
    var runner = new Ext.util.TaskRunner();
    runner.start(task);
});
